<template>
	<el-container>
		<el-header height="100px">
			<!-- 顶部内容  一个图标，一部分标题栏，一个搜索，一个登录，一个购物车 -->
			<div style="margin-top: 30px;">
				<el-image style="width: 200px; height: 60px;margin-top: 10px;margin-left: 30px;" :src="url" fit="contain"></el-image>

				<!-- 顶部内容  一部分标题栏， -->
				<el-menu class="el-menu-demo" mode="horizontal" @select="gotoJingxuan">
					<!-- <a href="/" target="_blank">商城首页</a> -->
					<el-menu-item index="1">商城首页</el-menu-item>
					<el-menu-item index="2">外套精选</el-menu-item>
					<el-menu-item index="3">优质女鞋</el-menu-item>
					<el-menu-item index="4">时尚背包</el-menu-item>
					<el-submenu index="5">
						<template slot="title">品牌故事</template>
						<el-menu-item index="5-1">时尚资讯</el-menu-item>
						<el-menu-item index="5-2">设计师团队</el-menu-item>
						<el-menu-item index="5-3">联系我们</el-menu-item>
					</el-submenu>
				</el-menu>


				<!-- 一个搜索，一个登录，一个购物车 -->
				<el-breadcrumb separator="" style="margin-left: 16%;height: 60px;line-height: 60px;">
					<!--  todo a的href不会等到点击事件就执行方法  -->
					<el-breadcrumb-item><a href="#" @click="clickForSearch()"><i class="el-icon-search"></i></a></el-breadcrumb-item>
					<el-breadcrumb-item><a href="#" @click="gotoLogin()"><i class="el-icon-user"></i></a></el-breadcrumb-item>
					<el-breadcrumb-item><a href="#" @click="clickForSearch()"><i class="el-icon-shopping-cart-1"></i></a></el-breadcrumb-item>
					<el-breadcrumb-item> </el-breadcrumb-item>
				</el-breadcrumb>
			</div>
		</el-header>
		<el-divider></el-divider>

		<el-dialog title="搜索" :visible.sync="dialogForSearch">
			<el-form :model="formSearch">
				<el-form-item label="" label-width="10px">
					<el-input v-model="formSearch.keycode" placeholder="输入关键词" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="hideForSearch()">取 消</el-button>
				<el-button type="primary" @click="hideForSearch()">确 定</el-button>
			</div>
		</el-dialog>

	</el-container>
</template>

<script>
	export default {
		// 这里的name不影响导入使用
		name: "neHeader",
		data() {
			return {
				fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
				url: 'https://ccdn.goodq.top/caches/6cb70c11d7924995c4268c57fc3cb083/aHR0cHM6Ly81OGJmOTlmMWNlMjY5LnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDUvY2ExMzNmNDdmYThiZWQ2MmUxNTA5NGFjNDcyYjc0ZDYtOTAud2VicA_p_p100_p_3D_p_p100_p_3D.webp',
				dialogForSearch: false,
				formSearch: {
					keycode: '',
				},
			}
		},
		methods: {
			//点击弹窗产生搜索结果
			clickForSearch() {
				console.log("点击了展示搜索弹窗")
				this.dialogForSearch = true;
			},
			hideForSearch() {
				this.dialogForSearch = false;
			},
			// gotoJingxuan(){
			// },
			gotoLogin() {
				console.log("进入登录页")
				this.$router.push({
					name: 'login',
					params: {
						userId: 123
					}
				})
			},
			gotoJingxuan(key, keyPath) {
				console.log(key, keyPath);
				if (key == 2 || key == 3 || key == 4) {
					var title = "";
					if (key == 2) {
						title = '外套精选';
					}
					if (key == 3) {
						title = '优质女鞋';
					}
					if (key == 4) {
						title = '时尚背包';
					}
					console.log("进入精品页")
					//todo  这里 vue在进入同一个页面时，不刷新，那么就可以采用父子组件通信的方式，进行二次页面刷新
					this.$router.push({
						path: '/jingxuan',
						query: {
							name: title
						}
					})
					this.$emit("titleChanged", title); //自定义事件  传递值“子向父组件传值”
				} else if (key == '5-2') {
					console.log("进入设计师列表页")
					this.$router.push({
						name: 'designers',
						params: {
							userId: 123
						}
					})
				}else if (key == '5-1') {
					console.log("进入时尚资讯列表页")
					this.$router.push({
						name: 'information',
						params: {
							userId: 123
						}
					})
				}else if (key == '5-3') {
					console.log("进入联系我们页")
					this.$router.push({
						name: 'contactUS',
						params: {
							userId: 123
						}
					})
				} else {
					console.log("进入首页？");
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.el-header ul {
		display: inline-block;
		margin-left: 20%;
	}

	header .el-menu.el-menu--horizontal {
		border-bottom: solid 1px #ffffff;
	}

	header .el-breadcrumb {
		display: inline-block;
	}

	header i {
		font-size: 25px;
		margin-right: 15px;
	}

	/* .el-header ul .el-menu--horizontal{
		 margin-left: 100px;
	 } */
</style>
